<template>
  <div class="dashboard">

    <!-- 上部统计卡片 -->
    <el-row :gutter="20" class="top-cards">
      <el-col :span="6" v-for="item in stats" :key="item.title">
        <div class="card-box">
          <div class="card-title">{{ item.title }}</div>
          <div class="card-value">{{ item.value }}</div>
        </div>
      </el-col>
    </el-row>

    <!-- 中部图表：折线 + 饼图 -->
    <el-row :gutter="20" class="middle-charts">
      <el-col :span="16">
        <div ref="trendChart" class="chart-box"></div>
      </el-col>
      <el-col :span="8">
        <div ref="pieChart" class="chart-box"></div>
      </el-col>
    </el-row>

    <!-- 下部图表：柱状 + 环形 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <div ref="barChart" class="chart-box"></div>
      </el-col>
      <el-col :span="12">
        <div ref="ringChart" class="chart-box"></div>
      </el-col>
    </el-row>

    <!-- 最新操作日志 -->
    <el-row class="bottom-table" :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>最新操作记录</span>
          </div>
          <el-table :data="logs" border>
            <el-table-column label="用户" prop="user" width="120"></el-table-column>
            <el-table-column label="操作" prop="action"></el-table-column>
            <el-table-column label="时间" prop="time" width="180"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  data() {
    return {
      stats: [
        { title: "今日访问量", value: 12893 },
        { title: "注册用户", value: 5623 },
        { title: "填报数量", value: 937 },
        { title: "系统消息", value: 12 },
      ],
      logs: [
        { user: "管理员", action: "新增用户 张三", time: "2025-11-07 14:32" },
        { user: "张三", action: "修改个人资料", time: "2025-11-07 13:21" },
        { user: "系统", action: "自动备份数据库", time: "2025-11-07 02:01" },
      ],
    };
  },
  mounted() {
    this.drawTrendChart();
    this.drawPieChart();
    this.drawBarChart();
    this.drawRingChart();
  },
  methods: {
    drawTrendChart() {
      const chart = echarts.init(this.$refs.trendChart);
      chart.setOption({
        title: { text: "访问趋势" },
        xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] },
        yAxis: { type: "value" },
        series: [{ data: [120, 320, 220, 520, 820, 660, 900], type: "line", smooth: true }]
      });
    },
    drawPieChart() {
      const chart = echarts.init(this.$refs.pieChart);
      chart.setOption({
        title: { text: "业务占比", left: "center" },
        series: [
          {
            type: "pie",
            radius: "60%",
            data: [
              { value: 40, name: "用户" },
              { value: 25, name: "订单" },
              { value: 20, name: "流量" },
              { value: 15, name: "其他" },
            ]
          }
        ]
      });
    },
    drawBarChart() {
      const chart = echarts.init(this.$refs.barChart);
      chart.setOption({
        title: { text: "模块使用量" },
        tooltip: {},
        xAxis: { type: 'category', data: ['用户', '订单', '库存', '财务', '系统'] },
        yAxis: { type: 'value' },
        series: [
          { type: 'bar', data: [320, 450, 200, 380, 520], barWidth: '45%' }
        ]
      });
    },
    drawRingChart() {
      const chart = echarts.init(this.$refs.ringChart);
      chart.setOption({
        title: { text: "系统负载率", left: "center" },
        series: [
          {
            type: "pie",
            radius: ["45%", "70%"],
            label: { show: true, position: "center", fontSize: 22 },
            data: [
              { value: 78, name: "负载 78%" },
              { value: 22, name: "剩余" },
            ]
          }
        ]
      });
    }
  }
};
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;
}

.top-cards .card-box {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.card-value {
  font-size: 28px;
  margin-top: 5px;
  font-weight: bold;
  color: #409EFF;
}

.chart-box {
  height: 350px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 10px;
}

.bottom-table {
  margin-top: 20px;
}
</style>
